<template>
	<view>
		<view class="plr-16 mt-12">
			<view class="list">
				<view class="bg-color-item pa-16 br-8" v-for="item in list" :key="item.id">
					<view class="flex  flex-ai-center">
						<!-- <view class="plr-4 br-2 bg-color-theme2 font-color-white font-size-14 ptb-2">置顶</view> -->
					<u-avatar :src="$ossUrl+item.user_info.avatar" size='28'></u-avatar>
						<view class="ml-8 font-color-222 font-size-14 font-w-500">{{item.user_info.nickname}}</view>
						<view class="plr-4 br-4 font-color-white font-size-10 ml-8 ptb-2" style="background-color: #2499FF;">
							{{item.pay_way|formatPayName}}
						</view>
						<view class="flex-1 font-color-999 font-size-12 text-right"> {{item.createtime|formatDate}}</view>
					</view>
					<view class="mt-8 flex flex-ai-center">
						<view class="font-color-666 font-size-12">总价：<text class="font-size-12 font-color-222">￥</text>
							<text class="font-size-14 font-color-222">{{item.total_price}}</text>
						</view>
						<view class="font-color-666 font-size-12 ml-12">单价：<text
								class="font-size-12 font-color-222">￥</text> <text
								class="font-size-14 font-color-222">{{item.price}}</text> </view>
						<view
							class="plr-4 ptb-4 br-4 border-color-999 font-size-14 font-color-666 flex flex-ai-center flex-js-center"
							style="background: #eee; margin-left: auto;width: 200rpx;box-sizing: border-box;"> <text
								class="font-color-price">{{item.sale_numer}}/</text> {{item.number}} 件</view>
					</view>
				</view>
				<w-loading class="mt-40" :type="loadingType" empty-type="search"></w-loading>
			</view>
		
		</view>
		<view class="fix-btn bg-color-white">
			<view class="flex-center-sb w-100">
				<w-button @click.stop="myEntrustJump" type="dark" shape="circle" :pain="true"
					:style="{flex: '1',marginRight:'32rpx'}">我的委托</w-button>
				<w-button shape="circle" :style="{flex: '1'}" @click="contractsShow = true">立即委托</w-button>
			</view>
		</view>
		<contractsConfirm :product='product' v-model="contractsShow" :entrustPriceObj="entrustPriceObj" />
	</view>
</template>

<script>
	import {
		getEntrustPrice
	} from '@/api/market/index.js'
	import contractsConfirm from "./contractsConfirm.vue"
	export default {
		props: {
			list: {
				type: Array,
				default: () => ([])
			},
			loadingType: {
				type: String,
				default: 'none'
			},
			contractsTatal: {
				type: Number,
				default: 0
			},
			product:{
				type:[Object],
				default: () => {
					return {}
				}
			}
		},
		data(){
			return {
				contractsShow:false,
				entrustPriceObj: {},
			}
		},
		components: {
			contractsConfirm
		},
		watch:{
			contractsShow:{
				handler(newValue){
					if(newValue) this.handleEntrustPrice()
				},
				deep:true
			}
		},
		
		filters: {
			formatPayName(v) {
				let map = {
					huifu: "钱包A",
					yibao: "易"
				}
				return map[v]
			},
		},
		methods:{
			myEntrustJump() {
				uni.navigateTo({
					url: '/pages/order/entrust/list'
				})
			},
			handleEntrustPrice() {
				getEntrustPrice({
					collection_id: this.product.id
				}).then(res => {
					this.entrustPriceObj = res.data
				})
			},
		}
	}
</script>

<style lang="scss">
	.avatar {
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		background-color: #C18200;
	}

	.item {
		border-bottom: 2rpx solid #eee;
	}
	.fix-btn {
		width: 100%;
		padding: 20rpx 32rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		box-shadow: 0px -2px 28px 0px rgba(0,0,0,0.06);
		padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
	}
</style>